<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
        <p v-on:click="todosome">{{word}} </p>
        <button @click="changeCount()"> count = {{count}}</button>
        <button @click="changeCount(50)"> count + 50 </button>
        <p>
            <input type="text" @input="getvalue('YYDS',$event)">
        </p>
        <div @click.prevent ="parent">
            <div @click.stop ="childclickstop">
                Vue.js 为 v-on 提供了事件修饰符
            </div>
            <div @click.once ="childclick">
                事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()
            </div>
        </div>
        <div>
            <p>
                <input type="text" @keydown.enter.space.left ="getKecode" placeholder="keydown">
            </p>
            <p>
                <input type="text" @keyup.13.32.38.39.40 ="getKecode" placeholder="keyup">
            </p>
        </div>
        <div @click.ctrl="todosome">ctrl+click 配合使用 </div>

        <div>
            <hr>
            <h2>过滤器  Filter (进行文本格式化) </h2>
            <h4 :data-txt="txt | upper">txt = {{txt | lower }}</h4>
            <h4>count == {{count | fixed(4) }}</h4>
            <h4>num == {{num | numFormat(16) }}</h4>
            <h5>score == {{score | scoreFormat}}</h5>
            <h5>tel == {{tel | telFormat("-")}}</h5>
            <h5>time == {{time | dateFormat}}</h5>
            <h5>money == {{money | currencyFormat('$',3,3)}}</h5>
        </div>
    </div>
    <script>
        // 全局注册
        Vue.filter("upper",value=>{
            if(!value) return "";
            return value.toUpperCase();
        })
        
        Vue.filter("fixed",(value,n)=>{
            if(!value) return value;
            n = n || 2;
            return value.toFixed(n);
        })

        Vue.filter("numFormat",(value,n)=>{
            if(!value) return ""
            n = n || 10;
            return value.toString(n);
        })

        // 255/8   = 31  -  7 
        // 31 /8   = 3   -  7
        // 3  /8   = 0   -  3

        // 255/16 =  15 - 15 
        Vue.filter("scoreFormat",(value)=>{
            if(!value) return value;
            var score = parseInt(value/10);
            switch(score){
                case 9:
                return "A";
                break;

                case 8:
                return "B";
                break;

                case 7:
                return "C";
                break;

                case 6:
                return "D";
                break;

                default:
                return "E"
                break;
            }
        })

        Vue.filter("telFormat",(value,str)=>{
            if(!value) return '';
            str = str || '-';
            value = value.toString().split("");
            value.splice(3,0,str);
            value.splice(8,0,str);
            return value.join("")
        })

        // 日期   YYYY   YY  YY-MM-DD  MM-DD    hh:mm:ss
        Vue.filter("dateFormat",(value,type)=>{
            if(!value) return ''
            type = type || "YYYY-MM-DD HH:mm:ss"

            var time  = new Date(value);
            var year = time.getFullYear()
            var month = time.getMonth() + 1
            var day = time.getDate() 
            var hour = time.getHours()
            var min = time.getMinutes()
            var sec = time.getSeconds()
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`
        })


        // 封装货币的过滤器 
        // 123123123434334432
        // $ ￥  每隔千位 加 ,   保留几位小数  
        // ￥ 123,123,123,434,334,432.000

        Vue.filter("currencyFormat",(value,str,max,min)=>{
            if(!value) return ''
            str = str || "￥"
            max = max || 2;
            min = min || 2;
            return str + " " + value.toLocaleString("en",{minimumFractionDigits:min,maximumFractionDigits:max})
        })

        const vm = new Vue({
            // 局部过滤器 
            filters:{
                lower:function(value){
                    if(!value) return "";
                    return value.toLowerCase()
                }
            },
            data:{
                msg:"v-on  事件绑定 修饰符",
                word:"v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码",
                count:2000,
                txt:"Are you OK WH2107",
                num:255,
                score:78,
                tel:18012348899,
                time:new Date(),
                money:102319348213219.21356
            },
            methods:{
                todosome(){
                    console.log("wh2107-DayDayUp")      
                },
                changeCount(n){
                    n = n || 10;
                    this.count+=n;
                },
                getvalue(yy,e){
                    // $event == event 
                    e = e || window.event;
                    console.log(e.target.value)
                },
                parent(){
                    console.log("parent- parent - 父亲节点")
                },
                childclickstop(){
                    console.log("我一定会阻止事件冒泡")
                },
                childclick(){
                    console.log("我不会阻止事件冒泡,once")
                },
                getKecode(e){
                    console.log(e.keyCode)
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }
        }).$mount("#app")


    </script>
        <!-- 
                       
        用特殊变量 $event
        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符
        event.preventDefault()  阻止浏览器的默认事件
        event.stopPropagation()  阻止事件冒泡 

        v-on 提供了事件修饰符 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  
        .capture   
        .self
        .once        这个事件只能触发一次 
        .passive

        按键修饰符   键盘事件 (键盘码)
        enter    13 
        right    37 
        left
        space     32 
        up
        down 

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend

        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 
     -->
    <!-- 
        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
        “管道”符号指示   |
         
        Vue.filter 全局过滤器 
        filters 局部过滤器 
     -->
</body>
</html>